<template>
  <div class="block">
    <p class="block_input">
      <el-date-picker
        v-model="value2"
        type="month"
        placeholder="选择月份"
      ></el-date-picker>
      <el-button
        type="primary"
        class="el-icon-search"
        @click="search"
      ></el-button>
    </p>
    <p class="money">总金额: {{ zmoney }} </p>
    <p class="edit el-icon-s-tools" @click="parent"></p>
    <el-timeline v-for="(item, index) in data" :key="index" class="pay-box">
      <el-timeline-item placement="top">
        <el-card>
          <h4>支出 账单</h4>
          <p>金额：{{ item.mo_money }}</p>
          <p>时间：{{ item.con_time }}</p>
          <p>类别：{{ item.type_name }}</p>
          <p>备注：{{ item.con_rex }}</p>
          <el-button-group class="pay-button">
            <el-button
              type="primary"
              icon="el-icon-delete"
              :data-key="item.mo_id"
              @click="deletes($event)"
              v-if="flag"
            ></el-button>
          </el-button-group>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      time: "",
      money: "",
      value2: "", //日期插件
      data: [],
      zmoney: "",
      flag: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    parent() {
      if (this.flag == 0) {
        this.flag = 1
      } else if (this.flag == 1) {
        this.flag = 0
      }
    },
    search() {
      this.$http
        .get("/api/bill/money", {
          uid: this.$jwt(localStorage.getItem("User-Token")).uid,
          datatime: this.$month(this.value2),
          flage: 0,
        })
        .then((res) => {
          res.moneyData.forEach((once) => {
            if (once.money == null) {
              this.$message({
                message: '您这个月没有消费'
              })
            } else {
              this.zmoney = once.money;
            }
          });
          // console.log(res);
        });
    },
    deletes(e) {
    //  console.log(e.target.getAttribute("data-key"));
      this.$http
        .post("/api/bill/del", {
          moid: e.target.parentNode.getAttribute("data-key"),
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '账单删除成功',
              type: 'success'
            })
            this.reload()
          }
        });
    },
  },
  mounted() {
    this.$http
      .get("/api/bill/index", {
        uid: this.$jwt(localStorage.getItem("User-Token")).uid,
      })
      .then((res) => {
        if (res.code == 200 && res.incomepayData.length > 0) {
          res.incomepayData.forEach((once) => {
            if (once.mo_flage == "0") {
              this.data.push(once);
            }
          });
        }
      });
    this.value2 = this.$time(Date.now());
  },
};
</script>

<style lang="less" scoped>
.block {
  height: 90vh;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #201f1f;
  .money {
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto;
    color: #fff;
    padding: 0 0 0 2rem;
    border-bottom: 1px solid #ccc;
  }
  .block_input {
    display: flex;
    width: 100%;
    .el-date-editor {
      flex: 4;
    }
    .el-icon-search {
      flex: 1;
    }
  }
  li {
    width: 80%;
  }
  p,
  h4 {
    margin: 0.2rem 0;
  }
  .data_remarks {
    position: fixed;
    left: 0;
    width: 2rem;
    overflow: hidden;
  }
}
.pay-box {
  position: relative;
  .pay-button {
    position: absolute;
    top: 40%;
    right: 3%;
  }
}
.edit {
  margin: 0 auto;
  width: 90%;
  color: #fff;
  text-align: right;
}
</style>